<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>3-8recorder</title>
        <style>
            body{
                font-family: 'consolas',monospace;
                position:relative;
                left: 35%;
                top: 30%;
                display:flex;
                height: 100vh;
                margin: 0;
            }
            .act{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .identity{
                width: 200px;
                height: 400px;
                border: 1px solid #000;
                border-collapse: collapse;
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            
            .put,.output {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .inport {
                width: 60px;
                height: 30px;
                border: 1px solid #000;
                border-right: none;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 5px 0px;
            }
            .outport {
                width: 60px;
                height: 30px;
                border: 1px solid #000;
                border-left: none;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 5px 0px;
            }
            .nbport {
                width: 60px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 6px;
            }
        </style>

    </head>
    <body>
        <div class="act">
            <div class="put">
                <p class="inport" id="in2" onclick="getInput('in2')">0</p>
                <p class="inport" id="in1" onclick="getInput('in1')">0</p>
                <p class="inport" id="in0" onclick="getInput('in0')">0</p>
            </div>
            <div class="identity">
                <div class="put">
                    <div class="nbport">in2</div>
                    <div class="nbport">in1</div>
                    <div class="nbport">in0</div>
                </div>
                <div class="nbport">   </div>
                <div class="put">
                    <div class="nbport">out7</div>
                    <div class="nbport">out6</div>
                    <div class="nbport">out5</div>
                    <div class="nbport">out4</div>
                    <div class="nbport">out3</div>
                    <div class="nbport">out2</div>
                    <div class="nbport">out1</div>
                    <div class="nbport">out0</div>
                </div>
            </div>
            <div class="output">
                <div class="outport">0</div>
                <div class="outport">0</div>
                <div class="outport">0</div>
                <div class="outport">0</div>
                <div class="outport">0</div>
                <div class="outport">0</div>
                <div class="outport">0</div>
                <div class="outport">1</div>
            </div>
        </div>
        
    <script>
        var inputs = [0, 0, 0];

        function getInput(input) {
            const port = document.getElementById(input);
            inputs[input[2]] = 1 - inputs[input[2]];
            port.innerText = inputs[input[2]];
            update();
        }
    
        function update() {
            let gets = [0, 0, 0];
            gets[0]=inputs[2];
            gets[1]=inputs[1];
            gets[2]=inputs[0];

            let number = gets.join('');
            const outnum = parseInt(number, 2);
    
            for (let i = 0; i < 8; i++) {
                const port = document.getElementsByClassName('output')[0].children[7-i];
                port.innerText = (i === outnum) ? '1' : '0';
            }
        }
    </script>
    </body>
</html>